<%
  /*
    pass in the following data structure:

    {
      className: 'top-level-class', // optional
      maxPerRow: 3, // optional, deafult is 4
      filters: [
        {
          className: 'filterFulfilled', // optional
          id: 'filterFulfilled',
          text: 'Fulfilled',
          checked: true,
          // This corresponds to the transaction server state(s) that the
          // filter is correlated with.
          targetState: [0, 1],
          attrs: { // optional
            happy: 'yes',
            jovial: 'certainly',
          },
        },
        ...
      ]
    }
  */
%>

<%
  const maxPerRow = ob.maxPerRow || 4;
  const rows = ob.splitIntoRows(ob.filters, maxPerRow || 4);
%>

<div class="filters rowHg <%= ob.className %>">
  <% rows.forEach(row => { %>
  <div class="flex gutterH gutterV">
    <%
      row.forEach(filter => {
        let attrs = '';

        if (filter.attrs) {
          Object.keys(filter.attrs)
            .forEach(key => attrs += ` ${key}="${filter.attrs[key]}"`);
        }
    %>
    <div class="col3">
      <div class="filter clrP clrBr clrSh2 <%= filter.className %>">
        <input type="checkbox" id="<%= filter.id %>" <% if (filter.checked) print('checked') %> data-state="<%= JSON.stringify(filter.targetState)%>" <%= attrs %>>
        <label class="tx5b" for="<%= filter.id %>"><%= filter.text %></label>
      </div>
    </div>
    <%
      });

      // If necessary, add in spacers.
      for(let i = 0; i < (maxPerRow - row.length); i++) {
    %>
      <div class="col3"></div>
    <% } %>
  </div>
  <% }) %>
</div>
